<template>
    <div :style="{minHeight:clientH}">
        <template v-if="switchPage=='business'">
            <!-- <li class="no_content" v-if="list.length<=0">暂时无内容</li> -->
            <li class="sponsored_item" v-for="(item,index) in list" :key="index" @click="approveDetail(item.id,item.apply_title)">
                <h3>{{item.fd_sta_name}} : {{item.apply_title}} <span>{{item.created_at}}</span></h3>
                <p>开始时间：{{item.start_time}}</p>
                <p>结束时间：{{item.end_time}}</p>
                <p>时长(天)：{{item.total_time}}</p>
                <div v-if="pageName=='我发起的'">
                    <span v-if="item.status_desc=='审批通过'" class="approval_success">审批通过</span>
                    <span v-else-if="item.status_desc=='审批不通过'" class="approval_fail">审批不通过</span>
                    <span v-else-if="item.status_desc=='逾期不通过'" class="approval_fail">逾期不通过</span>
                    <span v-else class="approval_warning">{{item.status_desc}}</span>
                </div>
                <div v-else-if="pageName=='我已审批的'">
                    <span v-if="item.status_desc=='审批通过'" class="approval_success">审批通过</span>
                    <span v-else-if="item.status_desc=='审批不通过'" class="approval_fail">审批不通过</span>
                    <span v-else-if="item.status_desc=='逾期不通过'" class="approval_fail">逾期不通过</span>
                    <span v-else class="approval_warning">{{item.status_desc}}</span>
                </div>
                <div v-else-if="pageName=='待我审批的'" class="approve_last_day approval_fail">审批截止时间：{{item.last_time + '  23:59'}}</div>
            </li>
        </template>
        <template v-if="switchPage=='sevenDelay'">
            <li class="sponsored_item" v-for="(item,index) in list" :key="index" @click="approveDetail(item.id,item.apply_title)">
            <!-- <h3>{{item.fd_sta_name}} : {{item.apply_title}} <span>{{item.created_at}}</span></h3> -->
            <h3>申请获得 {{item.start_time}} 至 {{item.end_time}}<span>{{item.created_at}}</span></h3>
            <div v-if="pageName=='我发起的'">
                <span v-if="item.status_desc=='审批通过'" class="approval_success">审批通过</span>
                <span v-else-if="item.status_desc=='审批不通过'" class="approval_fail">审批不通过</span>
                <span v-else-if="item.status_desc=='逾期不通过'" class="approval_fail">逾期不通过</span>
                <span v-else class="approval_warning">{{item.status_desc}}</span>
            </div>
            <div v-else-if="pageName=='我已审批的'">
                <span v-if="item.status_desc=='审批通过'" class="approval_success">审批通过</span>
                <span v-else-if="item.status_desc=='审批不通过'" class="approval_fail">审批不通过</span>
                <span v-else-if="item.status_desc=='逾期不通过'" class="approval_fail">逾期不通过</span>
                <span v-else class="approval_warning">{{item.status_desc}}</span>
            </div>
            <div v-else-if="pageName=='待我审批的'" class="approve_last_day approval_fail">审批截止时间：{{item.last_time + '  23:59'}}</div>
        </li>
        </template>
    </div>
</template>
<script>
export default {
    name:'ApproveList',
    data(){
        return {
            clientH:0,
            title:''
        }
    },
    props:{
        list:{
            type:Array,
            default:()=>[]
        },
        pageName:{
            type:String,
            default:''
        },
        switchPage:{
            type:String,
            default:'business'
        }
    },
    mounted(){
        var h = document.body.clientHeight
        this.clientH = h - 160 + 'px';
    },
    methods:{
        approveDetail(id,title){
            // console.log(id)
            this.$router.push({name: "approveDetail",query:{fd_sta_id:id,title:title}});
            localStorage.setItem('pageName',this.pageName)
        }
    }
}
</script>
<style lang="less" scoped>
.sponsored_item{
    width: 100%;
    height: auto;
    padding: 15px;
    background: #fff;
    font-size: 13px;
    color: #626466;
    overflow: hidden;
    box-sizing: border-box;
    border-bottom: 1px solid #f7f7f7;
    h3{
        line-height: 30px;
        font-size: 15px;
        color: #151617;
        font-weight: bolder;
        span{float: right;font-size: 12px;color: #999;font-weight: normal;}
    }
    p{line-height: 24px;}
    div{ line-height: 30px;}
    .approval_success{color: #02ccbd;}
    .approval_warning{color: #feb022;}
    .approval_fail{color: #ff4066;}
}
.no_content{
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    text-align: center;
    color: #999;
    margin-top: 100px;
}
</style>